<template>
  <h1>Hello Vue3</h1>
  <h2>{{ number }}</h2>
  <button @click="number += 1000">加油~</button>
</template>

<script>
/* 
  🔔 setup 特点：
    1. 执行时机非常早，在 beforeCreate 前就执行的钩子函数
      注意点：1. 不能直接DOM节点   2. 不能使用 this 访问组件实例
    2. return 返回的数据或函数可以在模板中使用
*/
import { ref } from 'vue'
export default {
  // setup 也是一个钩子函数，会自动运行内部代码
  setup() {
    // 1. 执行时机非常早
    console.log(111, 'setup内部代码')
    const h1 = document.querySelector('h1')
    console.log(h1) // null
    console.log(111, this) // undefined

    const number = ref(10000)
    // 2. return 返回的数据或函数可以在模板中使用
    return { number }
  },
}
</script>

<style></style>
